<template>
    <div id="MapDialogPerson">
		<div class="list-view">
			<div class="list flex">
				<div class="r-1">姓名：</div>
				<div class="r-2 flex align-items">
					<div>{{person.FZR}}</div>
				</div>
				<div class="r-1">联系电话：</div>
				<div class="r-2 flex align-items">
					<div>{{person.FZRDH}}</div>
				</div>
				<i class="el-icon-video-camera"></i>
				<i v-if="person.FZRDH && person.FZRDH !== ''" class="el-icon-phone" @click="$emit('click', person)"></i>
			</div>

			<div class="list">
				<div class="r-1">签到位置：</div>
				<div class="r-2 flex align-items">
					<div>{{person.STREET}}</div>
				</div>
			</div>
			<div class="list">
				<div class="r-1">签到时间：</div>
				<div class="r-2 flex align-items">
					<div>{{person.DWRS}}</div>
				</div>
			</div>
			<el-carousel v-if="false" :interval="5000" arrow="always">
				<el-carousel-item v-for="(item, index) in info.imgList" :key="index" class="carousel-view" >
					<img class="carousel-img" :src="item.img" alt="" />
				</el-carousel-item>
			</el-carousel>
		</div>
    </div>
</template>

<script type="text/ecmascript-6">

    export default {
		// props:['info','navList'],
		props: {
			person: {
				type: Object,
				default () {
					return {}
				}
			},
		},
        data() {
            return {
				navIndex: 0,
				imgUrl: '',
            }
        },
        mounted() {
			
        },
		methods: {
			clickEvent(index) {
				this.navIndex = index
				for(let i = 0; i < this.info.navList.length; i++) {
					this.info.navList[i].isSel = i == index
				}
				
				
			},
			carouselEvent(url) {
				this.imgUrl = url
			},
		}
    }
</script>

<style lang="less"  rel="stylesheet/less">
#MapDialogPerson {
	.el-carousel__container {
		height: 230px*@ratio!important;
		
	}
	.carousel-img {
		width: 100%;
		height: 230px*@ratio;
	}
	.details-view {
		width: 100%;
		height: 30px*@ratio;
		background-color: #173858;
		display: flex;
		line-height:30px*@ratio;
		text-align: center;
		div {
			width: 100px*@ratio;
			height: 100%;
			font-size: 12px*@ratio;
			color: #fff;
		}
		.clickBg {
			background-color: #0d2843;
		}
	}
	.list-view {
		height: 260px*@ratio;
		display: block;
		overflow-y: auto;
		
	}
	.carousel-view {
		height: 230px*@ratio;
		padding: 30px*@ratio 30px*@ratio;
	}
	.nothing {
		width: 150px*@ratio;
		height: 80px*@ratio;
		
	}
	.center {
		width: 100%;
		height: 100%;
		display: flex;
		/*水平居中*/
		justify-content: center;
		/*垂直居中*/
		align-items: center;
	}
	.flex {
		display: flex;
	}
	.align-items {
		align-items: center;
	}
	.icon-view {
		margin-left: 20px*@ratio;
	}
	.list {
		width: 90%;
		display: flex;
		align-items: center;
		margin: 0 20px*@ratio;
		height: 35px*@ratio;
		border-bottom: 1px*@ratio dashed #3b4d61;
		color: rgba(2,240,244, 0.8);
		font-size: 12px*@ratio;
		.r-1 {
			width: 23%;
		}
		.r-2 {
			color: #fff;
			flex: 1
		}
		.el-icon-phone, .el-icon-video-camera{
			color: #fff;
		}
	}
	*::-webkit-scrollbar{
	    width: 0;height: 0;
	}
}
</style>
